<template>
    <el-container>
        <el-header>
            <div >
				<el-button type="primary" :icon="Plus" @click="add"></el-button>
				<el-button type="primary" :icon="Plus" >页面新增</el-button>
				<el-button type="danger" plain :icon="Delete" ></el-button>
			</div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :data="dataSource" :column="columns" :border="true" row-key="id" @selection-change="selectionChange"
                stripe>

                <template ##="scope">
                    {{ scope.$index+1}}
                </template>
                <template #clientIcon="scope">
                    <el-avatar shape="square" :size="50" :src="scope.row.clientIcon" />
                </template>
                <template #scopes="scope">
                    <el-tag type="primary"
                        v-for="(item, index) in scope.row.scopes.split(',').map((s: string) => s.trim()).filter(Boolean)">{{
                        item }}</el-tag>
                </template>
                <template #authorizationGrantTypes="scope">
                    <el-tag type="success"
                        v-for="(item, index) in scope.row.authorizationGrantTypes.split(',').map((s: string) => s.trim()).filter(Boolean)">{{
                        item }}</el-tag>
                </template>

                <template #redirectUris="scope">
                    <a>{{ scope.row.redirectUris }}</a>
                </template>

                <template #operation="opt">
                    <el-button plain size="small">查看</el-button>
                    <el-button type="primary" plain size="small">编辑</el-button>
                    <el-popconfirm title="确定删除吗？">
                        <template #reference>
                            <el-button plain type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </scTable>
            <clientModal ref="modal":showModal="showModal" @close="close"></clientModal>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getClientListApi } from '@/api/modules/auth'
import { Delete, Plus } from '@element-plus/icons-vue';

import clientModal from './components/clientModal.vue';

const modal = ref<InstanceType<typeof clientModal> | null>(null);

const dataSource = ref<Array<Client>>([]);
const data = async () => {
    const temp = await getClientListApi()
    console.log(temp.data);

    dataSource.value = temp.data.records
}
data()
const showModal= ref<boolean>(false);
const columns = ref([
    { prop: "#", label: "#", align: "left", width: 50 },
    { prop: "clientIcon", label: "图标", width: 100 },
    { prop: "clientName", label: "应用名称", width: 100 },
    { prop: "clientId", label: "AppKey", width: 100 },
    { prop: "authorizationGrantTypes", label: "GrantTypes", width: 200 },
    { prop: "redirectUris", label: "回调地址", width: 400 },
    { prop: "scopes", label: "Scopes" },
    { prop: "requireAutoApprove", label: "是否需要授权" },
    { prop: "operation", label: "操作" }

]);

const add=()=>{
    showModal.value=true
    modal.value.title='新增'
}
const close = ()=>{
    showModal.value=false
}



const selectionChange = () => { }
</script>

<style scoped></style>